<template>
  <div>
    <a-form :form="form">
      <a-form-item label="评分卡名称" :labelCol="{ span: 4 }" :wrapperCol="{ span: 12 }">
        <a-input
          v-decorator="['name', { rules: [{ required: true, message: '请输入评分卡名称' }] }]"
          placeholder="请输入评分卡名称"
          :disabled="isEdit"
        />
      </a-form-item>
      <a-form-item label="评分卡描述" :labelCol="{ span: 4 }" :wrapperCol="{ span: 12 }">
        <a-input v-decorator="['description']" placeholder="请输入评分卡描述" :disabled="isEdit" />
      </a-form-item>
      <a-form-item label="规则配置" :labelCol="{ span: 4 }" :wrapperCol="{ span: 12 }">
        <a-space class="upload-space">
          <a-tooltip title="支持扩展名：.xlsx、.xls">
            <a-upload
              v-decorator="['gradeModel', { rules: [{ required: true, message: '请上传评分卡模型文件' }] }]"
              name="file"
              :multiple="false"
              :before-upload="beforeUpload"
            >
              <a-button><a-icon type="upload" /> 上传模型文件</a-button>
            </a-upload>
          </a-tooltip>
          <a-button @click="handleDownload" v-if="!isEdit"><a-icon type="download" /> 模板下载</a-button>
        </a-space>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleSubmit" :loading="loading">确定</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { templateDownload, uploadScoreCardModel } from '@/api/scorecard'
export default {
  name: 'EditAndCreateScoreModel',
  props: {
    initialData: {
      type: Object,
      default: () => {},
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
    }
  },
  watch: {
    initialData: {
      handler(newVal) {
        this.initForm(newVal)
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    initForm(data) {
      if (!data) {
        return
      }
      const initData = {
        name: data.name,
        description: data.description,
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(initData)
      })
    },
    handleDownload() {
      templateDownload({}, { defaultFileName: 'scorecard-template.xlsx' })
    },
    beforeUpload(file) {
      // 根据文件类型进行不同的验证
      const isXLSX = file.name.toLowerCase().endsWith('.xlsx')
      const isXLS = file.name.toLowerCase().endsWith('.xls')
      if (!isXLSX && !isXLS) {
        this.$message.error('模板文件只支持 .xlsx、.xls 格式的文件')
        return false
      }
      // 返回 false 阻止自动上传
      return false
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (err) {
          return
        }
        const params = {
          name: values.name,
          description: values.description,
          gradeModel: values.gradeModel.file,
        }
        const formData = new FormData()
        Object.keys(params).forEach((key) => {
          formData.append(key, params[key])
        })
        this.loading = true
        uploadScoreCardModel(formData).then((res) => {
          this.loading = false
          if (res.code === 200) {
            this.$message.success('上传成功')
            this.$emit('cancel')
            this.$emit('updateList')
            return
          }
          this.$message.error(res.message)
        })
        console.log(values)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.upload-space {
  align-items: flex-start;
}
</style>
